<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
</head>
<style>
    .background{
        width: 1450px;
        height: 780px;
        background-color:rgb(70, 33, 33);
        text-align: center;
    }
    .login{
        background-color: rgb(231, 177, 110);
        width: 418px;
        height: 290px;
        position: absolute;
        top: 200px;
        left: 500px;
        background-color:rgb(252, 250, 250);
        color:black;
        
    }
    table {
          border-collapse: collapse; /* 合并边框 */
         border: 1px solid #000; /* 设置边框样式、宽度和颜色 */
    }

     td, th {
       border: 1px solid #000; /* 设置边框样式、宽度和颜色 */
        padding: 8px; /* 设置单元格内边距 */
       }
       input:hover{
         color: cyan;
         background-color: blueviolet;
       }
       tbody tr:hover{
        cursor:pointer;
        background-color: rgba(35,198,200,0.3);
       }
       .niceButton3{
        background-color: #1795bb;
        border: radius 12px;
        border:none;
        color:white;
        padding: 16px 32px;
        text-align: center;
        text-align: center;
        text-decoration: none;
        display:inline-block;
        font-size: 16px;
        margin:4px 2px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
       }
       .niceButton3:hover{
         background-color: #fff;
        color:#1795bb;
          border:1px solid #ccc;
       }
</style>
<body>
    <div class="background">
    <div class="login">
       <form action="">
        <table>
            <tr>
                <td>姓名：</td>
                <td><input type="name">
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="gender" id="male"><label for="male">男</label>
                    <input type="radio" name="gender" id="female"><label for="female">女</label>
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td><input type="checkbox" id="1"><label for="1">打游戏</label>
                    <input type="checkbox" id="2"><label for="2">追剧</label>
                    <input type="checkbox" id="3"><label for="3">打游戏＋追剧</label>
                    <input type="checkbox" id="4"><label for="4">吃饭</label>
                </td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td><input type="date" name="" id="">
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea name="" id=""></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                 <td><button class="niceButton3">登录</button></td>
            </tr>
        </table>
       </form>
    </div>
</div>
</body>
</html>